<template>
  <div>
    <el-card class="welcome-card">
      <h1>欢迎来到清华大学OJ在线评测平台</h1>
      <p>这里你可以刷题、参加比赛、查看排行榜、提交代码并提升你的算法能力！</p>
    </el-card>
    <!-- 公告板 -->
    <el-card class="block-card">
      <div class="card-header" align="center">
        <i class="el-icon-info"></i>
        <span class="card-title">公告板</span>
      </div>
      <el-table :data="notices" border style="width: 100%; margin-top: 10px;">
        <el-table-column prop="content" label="内容">
          <template slot-scope="scope">
            <span v-html="scope.row.content"></span>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="100" align="center">
          <template slot-scope="scope">
            <span style="color: #13c2c2">{{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="时间" width="180" align="center" />
      </el-table>
    </el-card>

    <!-- Top 10 榜单 -->
    <el-row :gutter="20" style="margin-top: 10px;margin-bottom: 10px;">
      <el-col :xs="24" :md="12">
        <el-card class="block-card">
          <div class="card-header">
            <i class="el-icon-trophy"></i>
            <span class="card-title">Top 10 本周</span>
          </div>
          <el-table :data="top10Week" class="only-bottom-border-table" style="width: 100%;" :show-header="true" :border="false">
            <el-table-column label="榜单" width="60">
              <template slot-scope="scope">
                <i class="el-icon-medal-1" style="color:gold;font-size:20px;" v-if="scope.$index===0"></i>
                <span v-else>{{ scope.$index+1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="user" label="用户">
              <template slot-scope="scope">
                <a style="color:#13c2c2;" href="#">{{ scope.row.user }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="from" label="来自" />
            <el-table-column prop="solved" label="已解决" width="80" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="12">
        <el-card class="block-card">
          <div class="card-header">
            <i class="el-icon-trophy"></i>
            <span class="card-title">Top 10 上周</span>
          </div>
          <el-table :data="top10LastWeek" class="only-bottom-border-table" style="width: 100%;" :show-header="true" :border="false">
            <el-table-column label="榜单" width="60">
              <template slot-scope="scope">
                <i class="el-icon-medal-1" style="color:gold;font-size:20px;" v-if="scope.$index===0"></i>
                <span v-else>{{ scope.$index+1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="user" label="用户">
              <template slot-scope="scope">
                <a style="color:#13c2c2;" href="#">{{ scope.row.user }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="from" label="来自" />
            <el-table-column prop="solved" label="已解决" width="80" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      features: [
        {
          title: '题库',
          desc: '丰富的算法与编程题目，助你提升编程能力',
          link: '/problems',
          icon: 'el-icon-document'
        },
        {
          title: '比赛',
          desc: '定期举办各类编程竞赛，挑战自我',
          link: '/contests',
          icon: 'el-icon-trophy'
        },
        {
          title: '排行榜',
          desc: '与全国高手一较高下，见证你的成长',
          link: '/rankings',
          icon: 'el-icon-s-data'
        },
        {
          title: '提交记录',
          desc: '随时回顾你的成长与提交历史',
          link: '/submissions',
          icon: 'el-icon-tickets'
        },
        {
          title: '用户中心',
          desc: '管理你的个人信息与成就',
          link: '/profile',
          icon: 'el-icon-user'
        }
      ],
      notices: [
        { content: '<b>程序评测平台开发使用日志</b> <span style="color:red">[置顶]</span><br>恶意刷题的账号将进行封号处理！学习的目的是在于掌握知识，训练能力，抄袭不会有任何意义！', author: 'admin', date: '2021-10-13 07:23:34' },
        { content: '群组再升级，右上方选中"我的群组"即可显示你已加入的群组或课程', author: 'admin', date: '2024-08-01 12:28:56' },
        { content: '编程的乐趣在于编写出可运行的程序，请保证代码在自己电脑上运行成功再提交到此平台。', author: 'winter', date: '2023-01-21 08:29:19' },
        { content: '请勿抄袭他人代码，诚信参赛。', author: 'winter', date: '2022-02-23 17:21:14' },
      ],
      top10Week: [
        { user: 'XLM2380 张心悦', from: '小龙码浙江 五年级', solved: 18 },
        { user: 'XLM2022179 方家嘉', from: '广西 7年级', solved: 10 },
        { user: 'XLM2373 周雨泽', from: '小龙码黑龙江 六年级', solved: 9 },
        { user: 'XLM2142 凌子涵', from: '小龙码上海 六年级', solved: 8 },
        { user: 'XLM2440 谢睿', from: '小龙码 八年级', solved: 6 },
        { user: 'XLM2409 张宇兴', from: '小龙码江西 六年级', solved: 6 },
        { user: 'XLM2047 刘文涛', from: '小龙码江苏 五年级', solved: 3 },
        { user: 'XLM2064 熊欣洋', from: '小龙码江西 五年级', solved: 3 },
        { user: 'XLM2214 陆洋昊', from: '小龙码四川 六年级', solved: 3 },
        { user: 'XLM2408 彦博', from: '小龙码浙江 五年级', solved: 3 },
      ],
      top10LastWeek: [
        { user: 'XLM2380 张心悦', from: '小龙码浙江 五年级', solved: 85 },
        { user: 'XLM2022179 方家嘉', from: '广西 7年级', solved: 44 },
        { user: 'XLM2047 刘文涛', from: '小龙码江苏 五年级', solved: 35 },
        { user: 'XLM2214 陆洋昊', from: '小龙码四川 六年级', solved: 18 },
        { user: 'XLM2142 凌子涵', from: '小龙码上海 六年级', solved: 12 },
        { user: 'XLM2404 许湛辰', from: '小龙码江西 六年级', solved: 12 },
        { user: 'XLM2332 方鹏翔', from: '小龙码重庆 五年级', solved: 9 },
        { user: 'XLM2408 彦博', from: '小龙码浙江 五年级', solved: 8 },
        { user: 'XLM2255 莫杜糯', from: '小龙码浙江 七年级', solved: 8 },
        { user: 'XLM2395 忻恩赟', from: '小龙码浙江 五年级', solved: 8 },
      ]
    }
  }
}
</script>

<style scoped>
.welcome-card {
  margin-top:10px;
  margin-bottom: 10px;
  text-align: center;
}
.feature-row {
  margin-top: 16px;
}
.feature-card {
  text-align: center;
  min-height: 220px;
}
.feature-icon {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 12px;
}
.block-card {
  margin-bottom: 0px;
}
.card-header {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.card-title {
  margin-left: 8px;
}
.only-bottom-border-table >>> .el-table__header-wrapper th {
  border-bottom: 1px solid #ebeef5 !important;
}
.only-bottom-border-table >>> .el-table__body-wrapper td {
  border-bottom: 1px solid #ebeef5 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
</style>
